<template>
  <el-upload
    class="upload-demo"
    :action="url"
    :on-preview="handlePreview"
    :file-list="flist"
    :headers="headers"
    :on-remove="handleRemove"
    :on-success="onSuccess"
    list-type="text"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">
      
    </div>
  </el-upload>
</template>

<script>
import { BACKEND_URL, URL_MAP } from '@/config/config';
import { mapGetters } from 'vuex';
import { downLoadByUrl } from '@/utils/utils';

// URL_MAP.UPLOAD_URL
export default {
    data() {
        return {
            flist:[],
            url: BACKEND_URL + URL_MAP.UPLOAD_URL,
        }
    },
    computed:{
        ...mapGetters(['token']),
        headers() {
            return {
                'Authorization':this.token
            }
        }
    },
    props:{
        value: Array,
    },
    model:{
        prop:'value',
        event: 'input'
    },
    methods:{
        onSuccess(e, t, fl) { 
            t.url = e.data 
            this.$emit('input', fl.map(v => {
                return {
                    url: v.url,
                    name: v.name
                }
            }))
            // console.log(fl)
        },
        handlePreview(v) {
            downLoadByUrl(v.url, this.token, v.name)
        },
        handleRemove(f, flist) {
            this.$emit('input', fl.map(v => {
                return {
                    url: v.url,
                    name: v.name
                }
            }))
        }
    },
    mounted() {
        this.flist = this.value
    }
};
</script>

<style>
</style>